<template>
  <div>
    <f7-list contacts>
      <f7-list-item v-for="item in contacts"
                    :title="item.fromUserName"
                    :media="getAvatarMedia(item)"
                    :link="toMessage()"
                    @click="setChatUser(item)"
      ></f7-list-item>
    </f7-list>
    <f7-button v-if="pageInfo.pages>pageInfo.pageNum" @click="getContacts(userId, pageInfo.pageNum+1, 1)" round class="more">
      查看更多...
    </f7-button>
    <f7-button v-else disabled round class="more">没有更多了...</f7-button>
  </div>
</template>

<script>
  import {getFriendList } from '../api/api'
  import {IMG_URL} from '../api/url'
  import forEach from 'lodash/forEach'
  export default {
    data(){
      return {
        contacts: [],
        data:"",
        pageInfo: "",
        userId:""
      }
    },
    mounted(){
    },
    methods: {
      getContacts(userId, pageNum, type){
        this.userId = userId;
        this.$f7.showIndicator();
        var obj = {
          param: {oredCriteria: [
              {
                criteria: [{
                   "condition": "to_user_id =",
                   "value": userId,
                   "singleValue": true
                }]
              }
            ]
          },
          pageInfo: {
            pageNum:pageNum ? pageNum : 1,
            pageSize:9
          }
        }
        var json=JSON.stringify(obj);
        getFriendList(json).then(data => {
          if (data.status == 200) {
            this.$f7.hideIndicator();
            if (type == 0){
                this.contacts = data.data.list;
            } else {
              var _self = this;
              forEach(data.data.list, (n) => {
                _self.contacts.push(n);
              })
            }
            this.data = data;
            this.pageInfo = data.data;
          } else {
            this.$f7.alert(data.msg, "hichat");
          }
        });
      },
      getAvatarMedia(item){
        return "<img class='avatar' src='" + IMG_URL + "/" + item.fromUserImg + "'/>";
      },
      toMessage(){
        return "/message"
      },
      setChatUser(item){
        this.$store.dispatch("initChatUser", item);
      }
    }

  }
</script>

<style lang="less" scoped>
  /deep/ .avatar {
    width: 50px;
    height: 50px;
  }
  .button.button-round{
    margin:20px 0px;

  }
</style>
